<script setup lang="ts">
import { computed } from "vue";

const props = defineProps<{
  source: any;
}>();

const events = defineEmits<{
  choose: [number];
}>();

/**
 * 规则条件：rule_condition
 * 1. 当rule_type等于1时 1: 从领取时生效 2：固定时间段生效
 * 2. 当rule_type等于2时 1:  所属活动报名商家可核销 2：指定商家可核销 3：指定商家不可核销 4：全部入驻商家可核销
 */

const verifyNum = computed(() => {
  return props.source.user_coupon.reduce((sum, item) => {
    return sum + (item.status == 2 ? 1 : 0);
  }, 0);
});

const handleClick = () => {
  const list = props.source.user_coupon;
  const target = list.find((item) => item.status === 1) ?? list[0];
  events("choose", target.coupon_id);
};
</script>

<template>
  <view class="px-4 py-3 my-3 bg-[#FFEDD6] rounded-lg">
    <view class="flex items-center">
      <view class="text-dark flex-auto">
        {{ source.activity_coupon_detail.coupon_name }}
      </view>
      <text class="flex-none text-dark mx-3"
        >{{ verifyNum }}/{{ source.num }}
      </text>
      <view
        class="flex-none py-1 px-2 bg-[#FCDEB7] text-primary rounded-full"
        @tap="handleClick"
        >可使用商家
      </view>
    </view>
    <!-- 
    <view class="mt-1 mb-2 text-sm">
      <view>以下商家未参加，不支持兑换：</view>
      <view>品牌1、品牌1、品牌1、品牌1、品牌1、品牌1、品牌1</view>
    </view>
    <view class="text-[#c7101a] text-sm">可用时间：2025-12-12、2025-05-01</view>
     -->
  </view>
</template>
